<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/css/bootstrap.min.css"
        integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    <link rel="stylesheet" href="./css/main.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.compat.css" />
    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
    <title>首页</title>
    <link href="https://vjs.zencdn.net/7.8.4/video-js.css" rel="stylesheet" />
    <link rel="stylesheet" href="./css/index.min.css">
    <script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script>
</head>

<body>
    <div class="wrapper">

        <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
            <div class="container">
                <a class="navbar-brand" href="#">
                    <img src="./image/index/logo.png" alt="">
                </a>
                <button class="navbar-toggler" type="button" data-toggle="collapse"
                    data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
                    aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>

                <div class="collapse navbar-collapse setheight" id="navbarSupportedContent">
                    <ul class="navbar-nav mr-auto">
                        <li class="nav-item active">
                            <a class="nav-link" href="#">首页</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="./html/layaFamily.html">Laya家族</a>
                        </li>
                        <li class="nav-item ">
                            <a class="nav-link" href="./html/game.html">游戏</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link " href="./html/news.html">新闻动态</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link " href="#">开发者中心</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link " href="#">开发者社区</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link " href="#">开放平台</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link " href="./html/aboutUs.html">关于我们</a>
                        </li>
                    </ul>
                    <ul class="nav navbar-nav navbar-dark">
                        <li class="dropdown">
                            <a href="##" data-toggle="dropdown" class="dropdown-toggle">Langueage<span
                                    class="caret"></span></a>
                            <ul class="dropdown-menu">
                                <li><a href="##">中文</a></li>
                                <li><a href="##">English</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
        <div class="banner">
            <div class="container">
                <div class="row">
                    <div class="col-lg-12">
                        <img src="./image/index/slider.jpg" alt="">
                    </div>
                </div>

            </div>
        </div>

        <div class="engine">
            <div class="container engine-bg wow fadeIn">
                <div class="row">
                    <div class="col-lg-12 wow fadeInDown " data-wow-offset="250">
                        <h1>LayaFlash 引擎</h1>
                        <h2>让Flash技术变成开发HTML5产品的利器</h2>
                    </div>
                    <div class="col-12 col-lg-8">
                        <div class="row flash-intro wow fadeIn delay-1s" data-wow-offset="250">
                            <div class="col-lg-6 col-md-8 col-sm-12 col-xs-12 items">
                                <div class="row item-detail ">
                                    <div class="col-xl-3  col-lg-3 col-md-2 col-sm-2 col-3">
                                        <div class="icon icon1"></div>
                                    </div>
                                    <div class=" col-8 text">
                                        <h4>快速Flash产品转换</h4>
                                        <p>Flash页游\手游仅需1个人7天即可转换为HTML5和APP游戏</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-6 col-md-8 col-sm-12 col-xs-12 items">
                                <div class="row item-detail ">
                                    <div class="col-xl-3 col-lg-3 col-md-2 col-sm-2 col-3">
                                        <div class="icon icon2"></div>
                                    </div>
                                    <div class="col-9 text">
                                        <h4>LayaFlash IDE</h4>
                                        <p>支持代码编译、调试、压缩与混淆加密、资源转换、在线文档等功能</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-6 col-md-8 col-sm-12 col-xs-12 items">
                                <div class="row item-detail ">
                                    <div class="col-xl-3  col-lg-3 .col-md-2 col-sm-2 col-3">
                                        <div class="icon icon3"></div>
                                    </div>
                                    <div class="col-9 text">
                                        <h4>HTML5零学习成本
                                        </h4>
                                        <p>AS3开发者可直接使用Flash开源框架和工具链进行开发HTML5</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-6 col-md-8 col-sm-12 col-xs-12 items">
                                <div class="row item-detail ">
                                    <div class="col-xl-3  col-lg-3 col-md-2 col-sm-2 col-3">
                                        <div class="icon icon4"></div>
                                    </div>
                                    <div class="col-9 text">
                                        <h4>性能媲美APP
                                        </h4>
                                        <p>LayaFlash引擎的重度游戏已运行于QQ空间等平台，性能媲美APP</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <div class="advantage">
            <div class="container advantage-bg">
                <div class="row">
                    <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-xs-12 col-12 advantage-img wow fadeIn delay-1s slow"
                        data-wow-offset="250">
                        <img src="./image/index/air-bar.jpg" alt="">
                    </div>
                    <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-xs-12 col-12 advantage-text">
                        <h2 class="wow fadeInLeft delay-1s" data-wow-offset="250" delay-1s>Layabox 优势</h2>
                        <ul class="wow fadeInDown delay-1s">
                            <li>
                                <div class="icon">
                                </div>
                                <p>快速上手，Flash程序员3小时掌握HTML5开发</p>
                            </li>
                            <li>
                                <div class="icon">

                                </div>
                                <p>4年优化打磨，LayaPlayer运行器性能媲美APP</p>
                            </li>
                            <li>
                                <div class="icon">

                                </div>
                                <p>超5亿的LayaPlayer移动设备安装量帮助CP发行</p>
                            </li>
                            <li>
                                <div class="icon">

                                </div>
                                <p>使用LayaFlash开发大型HTML5游戏的企业超100家</p>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

        <div class="family">
            <div class="container family-bg">
                <div class="row family-content">
                    <h1 class="col-12 wow slideInUp">Layabox产品家族</h1>
                    <div class="col-12">
                        <div class="row family-introduction">
                            <div class=" col-xl-6 col-lg-6 col-md-6 col-sm-12 col-xl-6  wow slideInUp">
                                <div class="row">
                                    <div class="col-xl-3 col-lg-3 col-md-3 col-sm-12 col-xl-3 col-3 family-icon icon1">
                                    </div>
                                    <div class="col-xl-8 col-lg-8 col-md-8 col-sm-12 col-xl-8  col-8 family-text">
                                        <h3>
                                            LayaAir
                                        </h3>
                                        <p>核心库仅100K左右的新一代HTML5引擎，支持AS3\TS\JS语言开发，支持2D\3D，非运行器模式下性能媲美APP。</p>
                                    </div>
                                </div>
                            </div>
                            <div class=" col-xl-6 col-lg-6 col-md-6 col-sm-12 col-xl-6  wow slideInUp">
                                <div class="row">
                                    <div class="col-xl-3 col-lg-3 col-md-3 col-sm-12 col-xl-3 col-3  family-icon icon2">
                                    </div>
                                    <div class="col-xl-8 col-lg-8 col-md-8 col-sm-12 col-xl-8  col-8 family-text">
                                        <h3>
                                            LayaAir
                                        </h3>
                                        <p>核心库仅100K左右的新一代HTML5引擎，支持AS3\TS\JS语言开发，支持2D\3D，非运行器模式下性能媲美APP。</p>
                                    </div>
                                </div>
                            </div>
                            <div class=" col-xl-6 col-lg-6 col-md-6 col-sm-12 col-xl-6  wow slideInUp">
                                <div class="row">
                                    <div class="col-xl-3 col-lg-3 col-md-3 col-sm-12 col-xl-3 col-3 family-icon icon3">
                                    </div>
                                    <div class="col-xl-8 col-lg-8 col-md-8 col-sm-12 col-xl-8  col-8 family-text">
                                        <h3>
                                            LayaAir
                                        </h3>
                                        <p>核心库仅100K左右的新一代HTML5引擎，支持AS3\TS\JS语言开发，支持2D\3D，非运行器模式下性能媲美APP。</p>
                                    </div>
                                </div>
                            </div>
                            <div class=" col-xl-6 col-lg-6 col-md-6 col-sm-12 col-xl-6  wow slideInUp">
                                <div class="row">
                                    <div class="col-xl-3 col-lg-3 col-md-3 col-sm-12 col-xl-3 col-3 family-icon icon4">
                                    </div>
                                    <div class="col-xl-8 col-lg-8 col-md-8 col-sm-12 col-xl-8  col-8 family-text">
                                        <h3>
                                            LayaAir
                                        </h3>
                                        <p>核心库仅100K左右的新一代HTML5引擎，支持AS3\TS\JS语言开发，支持2D\3D，非运行器模式下性能媲美APP。</p>
                                    </div>
                                </div>
                            </div>
                            <div class=" col-xl-6 col-lg-6 col-md-6 col-sm-12 col-xl-6  wow slideInUp">
                                <div class="row">
                                    <div class="col-xl-3 col-lg-3 col-md-3 col-sm-12 col-xl-3 col-3 family-icon icon5">
                                    </div>
                                    <div class="col-xl-8 col-lg-8 col-md-8 col-sm-12 col-xl-8  col-8 family-text">
                                        <h3>
                                            LayaAir
                                        </h3>
                                        <p>核心库仅100K左右的新一代HTML5引擎，支持AS3\TS\JS语言开发，支持2D\3D，非运行器模式下性能媲美APP。</p>
                                    </div>
                                </div>
                            </div>
                            <div class=" col-xl-6 col-lg-6 col-md-6 col-sm-12 col-xl-6  wow slideInUp">
                                <div class="row">
                                    <div class="col-xl-3 col-lg-3 col-md-3 col-sm-12 col-xl-3 col-3 family-icon icon6">
                                    </div>
                                    <div class="col-xl-8 col-lg-8 col-md-8 col-sm-12 col-xl-8  col-8 family-text">
                                        <h3>
                                            LayaAir
                                        </h3>
                                        <p>核心库仅100K左右的新一代HTML5引擎，支持AS3\TS\JS语言开发，支持2D\3D，非运行器模式下性能媲美APP。</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="games">
            <div class="container games-bg">
                <div class="title ">
                    <h2 class="wow slideInLeft">采用Layabox引擎的精彩游戏</h2>
                    <div class="more">更多</div>
                </div>
                <div class="row games-display wow fadeInUp">
                    <div class="col-lg-5 col-xl-5 col-md-5 col-12 col-sm-12 videos">
                        <video 
                        id="my-video" 
                        class="video-player" 
                        controls 
                        preload="auto" 
                        poster="MY_VIDEO_POSTER.jpg" 
                        data-setup="{}">
                        <source src="./image/big_buck_bunny.mp4" 
                        type="video/mp4" 
                        />
                        <source src="MY_VIDEO.webm" type="video/webm" />
                            <p class="vjs-no-js">
                                To view this video please enable JavaScript, and consider upgrading to a
                                web browser that
                                <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5
                                    video</a>
                            </p>
                        </video>
                    </div>
                    <div class="col-lg-7 col-xl-7 col-md-7 col-xl-7 col-sm-12   col-12 games-icons">
                        <div class="row">
                            <div class="items ">
                                <img src="./image/index/1448595493706470.png" alt="">
                                <h5>上吧主公上吧主公</h5>
                            </div>
                            <div class="items">
                                <img src="./image/index/1448595739820321.png" alt="">
                                <h5>上吧主公</h5>
                            </div>
                            <div class="items">
                                <img src="./image/index/1448596805527127.png" alt="">
                                <h5>上吧主公</h5>
                            </div>
                            <div class="items">
                                <img src="./image/index/20150917095903153.png" alt="">
                                <h5>上吧主公</h5>
                            </div>
                            <div class="items">
                                <img src="./image/index/20150917100353560.png" alt="">
                                <h5>上吧主公</h5>
                            </div>
                            <div class="items">
                                <img src="./image/index/20150917100411595.png" alt="">
                                <h5>上吧主公</h5>
                            </div>
                            <div class="items">
                                <img src="./image/index/20150917100427748.png" alt="">
                                <h5>上吧主公</h5>
                            </div>
                            <div class="items">
                                <img src="./image/index/20150917095903153.png" alt="">
                                <h5>上吧主公</h5>
                            </div>
                            <div class="items">
                                <img src="./image/index/20150917100200350.png" alt="">
                                <h5>上吧主公</h5>
                            </div>
                            <div class="items">
                                <img src="./image/index/20150917095920748.png" alt="">
                                <h5>上吧主公</h5>
                            </div>
                            <div class="items">
                                <img src="./image/index/1448595493706470.png" alt="">
                                <h5>上吧主公</h5>
                            </div>
                            <div class="items">
                                <img src="./image/index/1448595493706470.png" alt="">
                                <h5>上吧主公</h5>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>


        <div class="cooperation">
            <div class="container cooperation-bg wow fadeInUp">
                <div class="title">
                    <h1>合作渠道</h1>
                    <span>(排序不分先后)</span>
                </div>
                <div class="row company-icons">
                    <div class="col-xl-2 col-lg-2 col-md-3 col-sm-4 col-4 item">
                        <div class="padding">
                            <img src="./image/index/1447667085837167.jpg" alt="">
                        </div>
                    </div>
                    <div class="col-xl-2 col-lg-2 col-md-3 col-sm-4 col-4 item">
                        <div class="padding">
                            <img src="./image/index/1447667022735949.jpg" alt="">
                        </div>
                    </div>
                    <div class="col-xl-2 col-lg-2 col-md-3 col-sm-4 col-4 item">
                        <div class="padding">
                            <img src="./image/index/1447666979289519.jpg" alt="">
                        </div>
                    </div>
                    <div class="col-xl-2 col-lg-2 col-md-3 col-sm-4 col-4 item">
                        <div class="padding">
                            <img src="./image/index/1447666933950076.jpg" alt="">
                        </div>
                    </div>
                    <div class="col-xl-2 col-lg-2 col-md-3 col-sm-4 col-4 item">
                        <div class="padding">
                            <img src="./image/index/1447666760298019.jpg" alt="">
                        </div>
                    </div>
                    <div class="col-xl-2 col-lg-2 col-md-3 col-sm-4 col-4 item">
                        <div class="padding">
                            <img src="./image/index/1448604300406522.jpg" alt="">
                        </div>
                    </div>
                    <div class="col-xl-2 col-lg-2 col-md-3 col-sm-4 col-4 item">
                        <div class="padding">
                            <img src="./image/index/1448604338444954.jpg" alt="">
                        </div>
                    </div>
                    <div class="col-xl-2 col-lg-2 col-md-3 col-sm-4 col-4 item">
                        <div class="padding">
                            <img src="./image/index/1448604354220485.jpg" alt="">
                        </div>
                    </div>
                    <div class="col-xl-2 col-lg-2 col-md-3 col-sm-4 col-4 item">
                        <div class="padding">
                            <img src="./image/index/1448604372733640.jpg" alt="">
                        </div>
                    </div>
                    <div class="col-xl-2 col-lg-2 col-md-3 col-sm-4 col-4 item">
                        <div class="padding">
                            <img src="./image/index/1448604384970211.jpg" alt="">
                        </div>
                    </div>
                    <div class="col-xl-2 col-lg-2 col-md-3 col-sm-4 col-4 item">
                        <div class="padding">
                            <img src="./image/index/1447667085837167.jpg" alt="">
                        </div>
                    </div>
                    <div class="col-xl-2 col-lg-2 col-md-3 col-sm-4 col-4 item">
                        <div class="padding">
                            <img src="./image/index/1447667046677762.jpg" alt="">
                        </div>
                    </div>

                </div>
            </div>

        </div>


        <footer>
            <div class="container">
                <div class="row">
                    <div class="footer-left coc-md-8 col-sm-8 col-xs-12">
                        <div class="company-mes">
                            <div>公司简介</div>
                            <div>联系方式</div>
                            <div>人才招聘</div>
                        </div>
                        <div class="company-copyright">
                            All Copyright Reserved by Layabox Inc. 京ICP备15008163号-1
                        </div>
                    </div>
                    <div class="footer-right coc-md-4 col-sm-4 col-xs-12">
                        <a class="email">
                            <div class="popbar email-up">
                                <img src="./image/index/email.png" alt="">
                            </div>
                        </a>
                        <a class="wechat">
                            <div class="popbar wechat-up">
                                <img src="./image/index/weixin.png" alt="">
                            </div>
                        </a>
                        <a class="tencentqq">
                            <div class="popbar tencentqq-up">
                                <img src="./image/index/qqpop.png" alt="">
                            </div>
                        </a>
                    </div>
                </div>

            </div>
        </footer>
    </div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"
        integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous">
    </script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
        integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous">
    </script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/js/bootstrap.min.js"
        integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous">
    </script>
    <script src="./js/wow.js"></script>
    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"> </script>
    <!-- <script src="https://vjs.zencdn.net/7.8.4/video.js"></script> -->
    <script>
        // let swiper = new Swiper('容器名')
    </script>
    <script>
        let wow = new WOW({
            boxClass: 'wow', // default
            animateClass: 'animated', // default
            offset: 250, // default
            mobile: true, // default
            live: true // default
        })
        wow.init();
    </script>

</body>

</html>